@import "../../assets/style/variavles.less";

@image-spacing: 5px;
.image-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 20px -@image-spacing;
}

.image-grid-item {
    display: block;
    box-sizing: border-box;
    border: @image-spacing solid #fff;
}

// 1张
.image-grid__image-group--1-1:extend(.image-grid-item) {
    width: 100%;
    height: 710px;
}

// 2张
.image-grid__image-group--2-1:extend(.image-grid-item),
.image-grid__image-group--2-2:extend(.image-grid-item) {
    width: 50%;
    height: 710px;
}

// 3张
.image-grid__image-group--3-1:extend(.image-grid-item) {
    width: 100%;
    height: 355px;
}
.image-grid__image-group--3-2:extend(.image-grid-item),
.image-grid__image-group--3-3:extend(.image-grid-item) {
    width: 50%;
    height: 355px;
}

// 4张
.image-grid__image-group--4-1:extend(.image-grid-item),
.image-grid__image-group--4-4:extend(.image-grid-item) {
    width: 66.66%;
    height: 355px;
}
.image-grid__image-group--4-2:extend(.image-grid-item),
.image-grid__image-group--4-3:extend(.image-grid-item) {
    width: 33.33%;
    height: 355px;
}

// 5张
.image-grid__image-group--5-1:extend(.image-grid-item),
.image-grid__image-group--5-2:extend(.image-grid-item) {
    width: 50%;
    height: 355px;
}
.image-grid__image-group--5-3:extend(.image-grid-item),
.image-grid__image-group--5-4:extend(.image-grid-item),
.image-grid__image-group--5-5:extend(.image-grid-item) {
    width: 33.33%;
    height: 355px;
}

// 6张
.image-grid__image-group--6-1:extend(.image-grid-item),
.image-grid__image-group--6-4:extend(.image-grid-item),
.image-grid__image-group--6-5:extend(.image-grid-item) {
    width: 66.66%;
    height: 236px;
}
.image-grid__image-group--6-2:extend(.image-grid-item),
.image-grid__image-group--6-3:extend(.image-grid-item),
.image-grid__image-group--6-6:extend(.image-grid-item) {
    width: 33.33%;
    height: 236px;
}

// 7张
.image-grid__image-group--7-1:extend(.image-grid-item),
.image-grid__image-group--7-3:extend(.image-grid-item) {
    width: 66.66%;
    height: 236px;
}
.image-grid__image-group--7-2:extend(.image-grid-item),
.image-grid__image-group--7-4:extend(.image-grid-item),
.image-grid__image-group--7-5:extend(.image-grid-item),
.image-grid__image-group--7-6:extend(.image-grid-item),
.image-grid__image-group--7-7:extend(.image-grid-item) {
    width: 33.33%;
    height: 236px;
}

// 8张
.image-grid__image-group--8-1:extend(.image-grid-item),
.image-grid__image-group--8-2:extend(.image-grid-item),
.image-grid__image-group--8-3:extend(.image-grid-item),
.image-grid__image-group--8-6:extend(.image-grid-item),
.image-grid__image-group--8-7:extend(.image-grid-item),
.image-grid__image-group--8-8:extend(.image-grid-item) {
    width: 33.33%;
    height: 236px;
}
.image-grid__image-group--8-4:extend(.image-grid-item),
.image-grid__image-group--8-5:extend(.image-grid-item) {
    width: 50%;
    height: 236px;
}

// 9张
.image-grid__image-group--9-1:extend(.image-grid-item),
.image-grid__image-group--9-2:extend(.image-grid-item),
.image-grid__image-group--9-3:extend(.image-grid-item),
.image-grid__image-group--9-4:extend(.image-grid-item),
.image-grid__image-group--9-5:extend(.image-grid-item),
.image-grid__image-group--9-6:extend(.image-grid-item),
.image-grid__image-group--9-7:extend(.image-grid-item),
.image-grid__image-group--9-8:extend(.image-grid-item),
.image-grid__image-group--9-9:extend(.image-grid-item) {
    width: 33.33%;
    height: 236px;
}
